<script setup>
import {ref,watch,reactive} from 'vue'
let name=ref("beijing")
let obj=reactive({xingming:"张三",xuehao:'202306050101',xingbie:'女',old:20,fumu:{father:"baba",mather:"mama"}})
//三个参数，1，侦听对象 2,（）=>{} 函数表达式 （新值,旧值） 3,可选参数 deep:false
//侦听对象是普通数据类型或者是对象时，deep:false/tur 都会触发监听
//如果侦听对象时通过函数返回时，返回的是对象信息，若要监听对象属性就必须：{deep:true}
//如果想让侦听对象数据在加载页面时立即侦听，immediate:true
//对于对象数据来说可以用对象数据作为侦听对象
watch(name,(newV,oldV)=>{
    console.log(newV,oldV)
},{deep:true})
watch(obj,(newV,oldV)=>{
    console.log(newV,oldV)
},{deep:true,immediate:true})
</script>
<template>
    <h1>监听器-Demo7</h1>
    <input type-text v-model="name"></input>
    <br>
    <p>name:{{name}}</p>
    {{obj}}
    <ul>
        <li>{{obj.xingming}}</li>
        <li>{{obj.xingbie}}</li>
        <li>{{obj.xuehao}}</li>
        <li>{{obj.old}}</li>
        <li>{{obj.fumu.father}}</li>
        <li>{{obj.fumu.mather}}</li>
    </ul>
    姓名：<input type="text" v-model="obj.xingming"><br>
    学号：<input type="text" v-model="obj.xuehao"><br>
    性别：<input type="text" v-model="obj.xingbie"><br>
    年龄：<input type="text" v-model="obj.old"><br>
    妈妈：<input type="text" v-model="obj.fumu.father"><br>
    爸爸：<input type="text" v-model="obj.fumu.mather"><br>
</template>
<style scoped>
</style>